<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .center{
            width: 1200px;
            margin: 0 auto;
        }
        body{
            background-color: rgb(241,242,243);
        }
        .el-header{
            background-color: white;
        }
        #footer_center p{
            margin: 0;
        }
        #footer_center h3{
            color: white;
        }
        p:hover {
            color:deepskyblue ;
        }
        .vodeolist img:hover {
            transform: scale(1.2);
        }
        .el-card a div{
            display:none;
        }
        .el-card a:hover div{
            display:block;
        }
        .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background-image: url('img/plyingbutton.jpg');
            background-size: cover;
            opacity: 0;
        }
        a:hover .play-button {
            opacity: 1;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <!--头,引入my-header.js-->
        <my-header></my-header>
        <!--中间,主要内容部分-->
        <el-main class="center">
            <!--*************************************-->
            <el-row style="background-color: white">
                <el-col span="3">
                    <p style="font-size: 18px;line-height: 65px;margin: 0">已购买的课程</p>
                </el-col>
            </el-row>
            <el-row gutter="20">
                <template v-if="courseArr.length === 0">
                    <a href="/contentList.html?paid=1" style="margin-top: 200px;margin-left: 400px">暂未购买任何课程，前往购买</a>
                </template>
                <template v-else>
                    <el-col v-for="r in courseArr" :key="r.bvid" span="6">
                        <el-card style="margin: 10px 0">
                            <a class="vodeolist" style="color: #333;text-decoration: none; position: relative; display: inline-block;" :href="'/video.html?bvid='+r.bvid">
                                <img :src="r.imgeurl" width="100%" height="144" style="cursor: pointer;">
                                <div class="play-button"></div>
                                <p style="height: 40px; cursor: pointer;">{{r.coursename}}</p>
                            </a>
                        </el-card>
                    </el-col>
                </template>
            </el-row>


            <!-- 返回顶部按钮 -->
            <el-backtop :bottom="100">
                <div
                        style="{
                                    height: 100%;
                                    width: 100%;
                                    background-color: #f2f5f6;
                                    box-shadow: 0 0 6px rgba(0,0,0, .12);
                                    text-align: center;
                                    line-height: 40px;
                                    color: #1989fa;
                                  }"
                                         >
                    返回顶部
                </div>
            </el-backtop>
           </el-main>
        <!--脚-->
        <el-footer style="height: 350px;padding:50px 0">

        </el-footer>

       </el-container>
</div>
</body>
<!--import axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入自己的js文件-->
<script src="js/my-header.js"></script>
<script src="js/my-footer.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                courseArr:[]
            }
        },
        methods: {
        },
        created:function () {
            //发请求获取所有的轮播图数据
            let user_id = localStorage.user?JSON.parse(localStorage.user).userid:null;
            axios.get("/v1/usercourses/mycourse/"+user_id).then(function (response) {
                v.courseArr = response.data.data;
            })
        }

    })
</script>
</html>